@charset "UTF-8";
@import "var";
@import "public";
.head {
    @include margin(1200px);
    margin: 12px auto 14px;
    height: 60px;
    img {
        float: left;
        margin-left: 7px;
    }
    .improve {
        float: right;
        margin-top: 34px;
        .icon {
            display: inline-block;
            width: 15px;
            height: 19px;
            background: url("../img/login/improve.png") no-repeat 0 0;
            vertical-align: middle;
        }
        .info{
            color:#787878
        }
    }
    
    a {
        color: #787878;
        &:hover {
            text-decoration: underline;
        }
    }
}
.login_bd {
    background: url("../img/login/bd.jpg") no-repeat center center;
    height: 590px;
    .login_bdimg {
        display: none;
    }
    .set_area{
        @include margin(1200px);
        position:relative;
        .click_area{
            @include positions(absolute,5px,85px);
            display: block;
            width: 655px;
            height: 415px;
            z-index: 100;
        }
    }
    .wrap {
        @include border1(#eef2f4);
        background: #fff;
        padding: 15px 25px 15px 15px;
        float: right;
        width: 320px;
        color: #6e6e6e;
        margin: 90px auto 0;
        position: relative;
        box-shadow: 0 1px 2px #eee;
        a{
           color:$login_aColor;
           &:hover{
             color:$login_aColor;  
           } 
        }
        input{
            outline:none;
        }
        .switch_btn{
            .switch{
                @include positions(absolute,none,7px);
                display: block;
                width: 55px;
                height: 55px;
                background: url("../img/login/scan_icon.png");
                right: 5px;
                z-index: 10;
            }
            .quick{
                background: url("../img/login/pc_icon.png");
            }
        }
        .info_remind{
            @include positions(absolute,null,7px);
            @include border1(#fedbd1);
            right: 68px;
            background-color: #fef7f5;
            color: #ff572a;
            padding: 4px 6px;
            .safe_icon{
                background: url("../img/login/safe_icon.png") no-repeat;
                display: inline-block;
                width: 15px;
                height: 17px;
                vertical-align: middle;
                margin-right: 4px;
            }
            .arrow_icon{
                @include positions(absolute,none,6px);
                background: url("../img/login/arrow_right_icon.png") no-repeat;
                display: inline-block;
                width: 12px;
                height: 12px;
                right: -12px;
            }
            .startTip{
                display: inline;
            }
            .quickTip{
                display: none;
            }
        }
        .infro{
            width:311px;
            float:right;
            .password_login{
                @include fonts(18px,inherit,#3c3c3c);
                font-family: 'Microsoft Yahei';
                margin-top: 5px;
            }
            #place.placeholder,#password_span.placeholder{
                @include positions(absolute,40px,0);
                @include fonts(13.33px,34px,rgb(176,176,176));
                width:270px;
                height:34px;
                padding-left:0;
                font-family: 'Microsoft Yahei';
                display: block;
                z-index: 20;
                background:none;
            }
            .username,.password,.code{
                @include border1(#e6e6e6);
                height:36px;
                width:310px;
                border-radius:2px;
                position:relative;
                &>span{
                    width:30px; 
                    margin-right:10px;
                    height:36px;
                    float:left;
                    background:url("../img/login/icon.png") 10px -110px no-repeat;
                }
                >input{
                    @include fonts(14px,34px,#ccc);
                    float:left; 
                    height:34px; 
                    border:0;
                    font-family: "Microsoft Yahei"; 
                    padding:0;
                }
                &.focus{
                    border-color:#969696;
                }
                &.blur{
                    border-color:#e6e6e6;
                    color:#a0a0a0;
                }
            .username,.password{
                >input{
                    width:270px;
                }
            }
            }
            .username{
                
                margin-top:20px;
                position:relative;
                &.error{
                  background-position:-14px -110px;  
                }
            }
            .password{
                &>span{
                    background-position:10px -150px;
                }
                &.error{
                    background-position:-14px -150px;
                }
            }
            .code{
                width:126px;
                float: left;
                span{
                    background-position:10px -189px;
                }
                &.error{
                    background-position:-16px -189px;
                }
                input{
                    width:86px;
                    float:left;
                }
                
            }
            .text_del{
                @include positions(absolute,290px,12px);
                width:10px;
                height:11px;
                background:url("../img/login/icon.png") 0 -230px no-repeat;
                &:hover{
                    background-position:-31px -230px;
                }
            }
            .pwdReplace{
                @include fonts(13px,21px,#B0B0B0);
                float:left; 
                height:21px; 
                cursor:text; 
                margin-top:-28px; 
            }
            .replacetype1{
                @include positions(absolute,none,44px);
                right:0;
            }
            .code_wrap{
                height: 38px;
            }
            .tips{
                @include hlptop(30px,30px,0px);
                padding-left:10px;
                span{
                    display:none;
                    &.big_tip,&.error_choose{
                        background:url('../img/login/big_tip_bg.png') 0 0 no-repeat;
                        margin-left:-10px; 
                        color:#ff8400; 
                        padding-left:32px;
                    }
                    &.error_choose{
                        padding-left:10px; 
                        color:#505050;
                        b{
                            background-color:#fff0cf;
                        }
                        input{
                            margin:0 3px 0 7px; 
                            vertical-align: text-bottom;
                        }
                    }
                }
            }
            .code_pic{
                width:86px;
                height:38px;
                float: left;
                margin:0 15px 0 5px;
                img{
                    width:86px;
                    height:38px;
                }
            }
            .code_wrap{
                a{
                    line-height:38px;
                }
            }
            .error{
                @include border1(#ff0000);
            }
            .error_words{
                color:#f42e00;
            }
            .auto_login{
                @include hlptop(27px,22px,7px);
                width:310px;
                overflow:hidden;
                a{
                    float:right;
                }
                input{
                    vertical-align: middle;
                    margin-top:-1px;
                }
            }
            .btn{
                a{
                    @include fonts(20px,44px,#fff);
                    width:100%;
                    border-radius:5px;
                    display: inline-block;
                    text-align: center;
                    font-family: "Microsoft Yahei";
                    background:#ff2832;
                    &:hover{
                        background:#f01923;
                    }
                }
            }
            .register{
                @include hlptop(24px,24px,6px);
                .register_btn{
                    float:right;
                    color:#6e6e6e;
                    &:hover{
                        color:#505050;
                    }
                }
                .other{
                    float:left;
                }
            }
            @mixin partnerLink($num){
                background-position:0 $num;
                &:hover{
                    background-position:-20px $num;
                }
            }
            .partner{
                dt{
                    float:left; 
                    margin-right:5px;
                    a{
                        width:20px; 
                        height:20px; 
                        display:block; 
                        background:url("../img/login/icon.png") 0 -260px no-repeat; 
                        text-indent:99em; 
                        overflow:hidden;
                        &.qq{
                            @include partnerLink(-260px);
                        }
                        &.wx{
                            @include partnerLink(-280px);
                        }
                        &.wb{
                            @include partnerLink(-300px);
                        }
                        &.alpay{
                            @include partnerLink(-320px);
                        }
                    }
                }
                dd{
                    padding-left:10px; 
                    position:relative; 
                    float:left; 
                    line-height:20px;
                    a{
                        color:#969696;
                        &:hover{
                            color:#787878
                        }
//                      &:hover em{
//                          background-position: -33px -340px;
//                      }
                        em{
                            width:8px; 
                            height:20px; 
                            display:inline-block; 
                            background:url("../img/login/icon.png") 0 -340px no-repeat; 
                            vertical-align:text-bottom; 
                            margin-left:5px;
                        }
                    }
                    ul{
                        @include positions(absolute,10px,24px);
                        @include border1(#eaeaea);
                        width:190px; 
                        padding:5px 0 1px 10px; 
                        background-color:#fafafa;  
                        border-radius:2px;
                        li{
                            float:left;
                            margin-right:22px;
                            height:18px;
                            line-height: 18px;
                            &.arrow{
                                @include positions(absolute,7px,-5px);
                                width:10px; 
                                height:6px; 
                                background:url('../img/login/more_arr.png') 0 0 no-repeat;
                            }
                            &.mr{
                                margin-right:0;
                            }
                            a{
                                color:#6e6e6e;
                                &:hover{
                                    color:#505050;
                                }
                            }
                        } 
                    }
                }
                
            }
            .new_tip{
                @include positions(absolute,none,54px);
                @include border1(#fedbd1);
                @include fonts(inherit,24px,#828282);
                padding-left:22px; 
                background:url('../img/login/new_tip.png') 3px 5px no-repeat #fef7f5;
                right: 0;
                a{
                    color:#1a66b3;
                }
            }
        //快速登录，扫码
            &.quick_login{
                height:403px;
            }
            .two_code{
                text-align: center;
                margin-top:80px;
                height:148px;
                .pic_code{
                    @include positions(absolute,73px,108px);
                    @include border1(#ececec);
                    padding:8px;
                }
                img{
                    width:145px;
                    height:145px;
                    display: block;
                }
            }
            .tel_remind{
                text-align: center;
                font-size:14px;
                color:#6c6c6c;
                margin-top:65px;
                .information span{
                    color: #ff2832;
                    margin-right: 16px;
                }
            }
            .register{
                margin-top:40px;
                .now_regist{
                    background: url("../img/login/now_regist.png") no-repeat;
                    display: inline-block;
                    width: 14px;
                    height: 14px;
                    float: right;
                    margin:6px 5px 0 0;
                }
            }
            .tel_pic{
                @extend %opa0;
                @include positions(absolute,null,81px);
                background: url("../img/login/tel_pic.png");
                width: 155px;
                height: 190px;
                right: -12px;
            }
            @mixin success($a,$b,$c){
                font-size:$a;
                color:$b;
                margin-top:$c;
            }
            .scan_success{
                .img{
                    text-align: center;
                    margin-top:56px;
                }
                p{
                    text-align: center;
                }
                .qrsuccess{
                    @include success(14px,#828282,20px);
                }
                .confirm{
                    @include success(16px,#323232,8px);
                }
                .return_btn{
                    display: block;
                    width:86px;
                    margin:24px auto 0;
                    color:#ff2832;
                }
            }
        }

        .login_core{
            a.btn{
                width:100%;
                border-radius:5px;
                color:#fff;
                display: inline-block;
                height:44px;
                text-align: center;
                font:normal 20px/44px "Microsoft Yahei";
                background:#ff2832;
                &:hover{
                  background:#f01923;
                  text-decoration:none;  
                }
            }
            .contact{
                display: block;
                a{
                   color: #969696; 
                   text-decoration: none;
                   &:hover{
                      text-decoration:underline; 
                   } 
                   .change_verify{
                       margin-left:115px; display:none;
                   }
                   .contact_service{
                       float:right;
                   }
                }
            }
            .list{
                li{
                    padding:14px 0;
                    line-height: 36px;
                    height:38px;
                    position:relative;
                    .ltip{
                        @include positions(absolute,90px,46px);
                        color:#969696;
                        &.wrong{
                            color:#ff2832;
                        }
                    }
                }
                input{
                    @include fonts(12px,36px,#969696);
                    @include border1(#d2d2d2);
                    font-family: "Microsoft Yahei";
                    width:200px; 
                    padding:0 0 0 10px; 
                    margin-right: 6px; 
                    display:inline-block; 
                    vertical-align:middle;
                    &.long{
                        width:220px;margin-right: 6px;
                    }
                    &.name{
                        float:left;
                        width:85px;
                        text-align: right;
                        margin-right:6px;
                        font-size: 14px;
                        line-height: 38px;
                    }
                    &.small{
                        width:70px;
                        margin-right:18px;
                    }
                    &:focus{
                        border-color:#969696;
                    }
                }
                .code{
                    display:inline-block; 
                    width:85px; 
                    height:38px; 
                    margin-right:8px; 
                    vertical-align:middle;
                }
                .tip{
                    text-align: center;
                    color:#6e6e6e;
                }
                .btn_check,.btn_uncheck{
                    @include border1(#d2d2d2);
                    display:inline-block; 
                    height:36px; 
                    color:#646464; 
                    background-color:#f6f6f6; 
                    width:110px; 
                    text-align:center; 
                    vertical-align:middle;
                }
                .btn_check:hover{
                    background-color:#fbfbfb;
                }
                .btn_uncheck{
                    background-color:#fbfbfb;
                    cursor:text;
                }
                .btn_red{
                    background-color:#ff2832; 
                    display:inline-block; 
                    width:86px; 
                    height:30px; 
                    line-height:30px; 
                    text-align:center; 
                    color:#fff;
                    &:hover{
                        background-color:#f01923;
                    }
                }
            }
        }
    }
}